<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mandelbrot explorer</title>
<style>
body{
	font-family: sans-serif;
}
a{
	color: #FF2740;
}
</style>
</head>
<body>

<h1>Use mouse wheel to zoom in and out.</h1>
<img src="mandel.jpg?width=512&height=512&zoom=1.0&X=-2.0&Y=-2.0" id="mandel" 
onmousedown="mandelMoveDown(event)" onmouseup="mandelMoveUp(event)"  onmousewheel="mandelZoom(event)" style="float: left; margin-right: 2em;">
<p>
All data is processed at the server and sent back to the client.
</p>
<p>Format:
<select id="format" onchange="mandelRefresh(event)" >
	<option value="png" >PNG</option>
	<option value="jpg" />JPG</option>
</select> 
Color:
<select id="color" onchange="mandelRefresh(event)" >
	<option value="0" >Grayscale</option>
	<option value="1" />RGB</option>
</select> 
</p>
<ul>
 <li> Zoom <b id="zoom">1.0</b></li>
 <li> Position (<b id="X">-2.0</b>, <b id="Y">2.0</b>)</li>
</ul>


<br style="clear: left;">
Tested on Google Chrome.
<br>
(C)2011 <a href="http://www.coralbits.com">Coralbits S.L.</a> Under AGPL license.

<script>
X=-2.5
Y=-2.0
width=512.0
height=512.0
zoom=1.0
W=4.0
H=4.0

mouseDownX=0
mouseDownY=0

mandelMoveDown = function(ev){
	sX=ev.offsetX || ev.clientX
	sY=ev.offsetY || ev.clientY

	mouseDownX=X+(sX/width)*W
	mouseDownY=Y+(sY/height)*H

	ev.preventDefault()
}

mandelMoveUp = function(ev){
	sX=ev.offsetX || ev.clientX
	sY=ev.offsetY || ev.clientY

	realX=X+(sX/width)*W
	realY=Y+(sY/height)*H

	X+=mouseDownX-realX
	Y+=mouseDownY-realY

	mandelRefresh();

	ev.preventDefault()
}

/**
 * Zooms on the current point. 
 *
 * It forces the mouse where it is in, to stay there.
 */
mandelZoom = function(ev){
	sX=ev.offsetX || ev.clientX
	sY=ev.offsetY || ev.clientY
	
	realX=X+(sX/width)*W
	realY=Y+(sY/height)*H

	if ((ev.wheelDelta || -ev.detail)>0)
		zoom=1.1;
	else
		zoom=1/1.1;

	W=W/zoom
	H=H/zoom

	X=realX-(sX/width)*W
	Y=realY-(sY/height)*H

	mandelRefresh()
	ev.preventDefault();
}

t=0
mandelRefresh = function(){
	elF = document.getElementById("format");
	if( elF != null ){
		F=elF.value;
	}else{
		F="png";
	}
	if( F == "jpg" ){
		//set compress quality in percent
		Q = 90;
	}

	elC = document.getElementById("color");
	if( elC != null ){
		C=elC.value;
	}else{
		C="0";
	}

	clearTimeout(t)
	t=setTimeout(function(){
		if( F == "png" ){
			document.getElementById("mandel").src="mandel.png?width="+width+"&height="+height+"&W="+W+"&H="+H+"&X="+X+"&Y="+Y+"&C="+C;
		}else{
			document.getElementById("mandel").src="mandel.jpg?width="+width+"&height="+height+"&W="+W+"&H="+H+"&X="+X+"&Y="+Y+"&C="+C+"&Q="+Q;
		}
		document.getElementById("zoom").innerText=zoom
		document.getElementById("X").innerText=X
		document.getElementById("Y").innerText=Y
	}, 50)
}

mandelRefresh()
if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        document.getElementById("mandel").addEventListener('DOMMouseScroll', mandelZoom, false);
</script>

</body>
